<template>
  <div class="configuration">
    <div class="left" id="myPaletteDiv"></div>
    <div class="right">
      <search-form
        style="padding:10px 10px 0 10px;"
        :search-data="formInline"
        :search-form="searchData"
        :search-handle="searchHandle"
      >
        <slot>
          <span title="组态背景色" class="dis_inlBlock">
            <el-color-picker
              v-model="formInline.backgroundColor"
              @change="changeBgFn"
            ></el-color-picker>
          </span>
          <span title="报警颜色" class="dis_inlBlock">
            <el-color-picker v-model="formInline.alarmColor"></el-color-picker>
          </span>
          <!-- <span title="报警数据颜色" class="dis_inlBlock">
            <el-color-picker
              v-model="formInline.alarmDataColor"
            ></el-color-picker>
          </span> -->
          <span title="离线数据颜色" class="dis_inlBlock">
            <el-color-picker
              v-model="formInline.onlineDataColor"
            ></el-color-picker>
          </span>
          <span title="正常数据颜色" class="dis_inlBlock">
            <el-color-picker
              v-model="formInline.normalDataColor"
            ></el-color-picker>
          </span>
        </slot>
      </search-form>
      <div id="myDiagramDiv" ref="container-Bg"></div>
    </div>

    <!-- 添加或编辑组态弹框 -->
    <addOrEditDialog
      v-if="dialogObj.show"
      :type="dialogObj.type"
      :Visible="dialogObj.show"
      :dialogRow="dialogObj.row"
      @close="dialogObj.show = false"
    ></addOrEditDialog>
    <!---end--->
    <!-- 节点管理弹框 -->
    <el-dialog
      title="节点管理"
      v-model="nodeDialogVisible"
      width="35%"
      center
      :close-on-click-modal="false"
      @close="nodeDialogVisible = false"
    >
      <el-form
        :model="form"
        label-width="80px"
        ref="nodeForm"
        class="demo-form-inline"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          label="字号"
          prop="zh_value"
          v-if="category == 'Comment' || category == 'datatitle'"
        >
          <el-select
            v-model="form.zh_value"
            filterable
            placeholder="请选择字号"
            style="width:100%;"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="字体"
          prop="zt_value"
          v-if="category == 'Comment' || category == 'datatitle'"
        >
          <el-select
            v-model="form.zt_value"
            filterable
            placeholder="请选择字体"
            style="width:100%;"
          >
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="背景颜色"
          prop="bjcolor_value"
          v-if="category == 'Comment' || category == 'datatitle'"
        >
          <el-color-picker
            v-model="form.bjcolor_value"
            :predefine="predefineColors"
          >
          </el-color-picker>
        </el-form-item>
        <el-form-item
          label="字体颜色"
          prop="fontcolor_value"
          v-if="category == 'Comment' || category == 'datatitle'"
        >
          <el-color-picker
            v-model="form.fontcolor_value"
            :predefine="predefineColors"
          >
          </el-color-picker>
        </el-form-item>
        <el-form-item
          label="管道规格"
          prop="gdgg_value"
          v-if="
            category != 'Comment' &&
              category != 'datatitle' &&
              category != 'pic'
          "
        >
          <el-select
            v-model="form.gdgg_value"
            filterable
            placeholder="请选择管道规格"
            style="width:100%;"
          >
            <el-option
              v-for="item in options5"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="管道颜色"
          prop="gdcolor_value"
          v-if="
            category != 'Comment' &&
              category != 'datatitle' &&
              category != 'pic'
          "
        >
          <el-color-picker
            v-model="form.gdcolor_value"
            :predefine="predefineColors"
          >
          </el-color-picker>
        </el-form-item>
        <el-form-item
          label="选择热源"
          style="margin-bottom:0;"
          v-if="category != 'pic'"
        >
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item prop="heatSourceId">
                <el-select
                  v-model="form.heatSourceId"
                  filterable
                  placeholder="选择热源"
                  style="width:100%;"
                  @change="handleHeatSourceChange(form.heatSourceId, 2)"
                >
                  <el-option
                    v-for="item in heatOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="heatStationId">
                <el-select
                  v-model="form.heatStationId"
                  filterable
                  clearable
                  placeholder="请选择换热站"
                  style="width:100%;"
                  @change="handleHeatStationChange(2)"
                >
                  <el-option
                    v-for="item in stationOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="heatSystemId">
                <el-select
                  v-model="form.heatSystemId"
                  filterable
                  clearable
                  placeholder="请选择系统"
                  style="width:100%;"
                  @change="getConfigurationList(2)"
                >
                  <el-option
                    v-for="item in systemOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          label="数据点"
          prop="sjd_value"
          v-if="category != 'Comment' && category != 'pic'"
        >
          <el-select
            v-model="form.sjd_value"
            filterable
            remote
            reserve-keyword
            placeholder="输入数据点名称搜索"
            :remote-method="remoteMethod"
            :loading="loading"
            style="width:100%;"
            @change="dataPointChange"
          >
            <el-option
              v-for="item in sjdOptions"
              :key="item.id"
              :label="item.dataName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="关联组态"
          style="margin-bottom:0;"
          v-if="category == 'Comment'"
        >
          <el-form-item prop="pathId">
            <el-select
              v-model="form.pathId"
              filterable
              placeholder="请选择组态图"
              style="width:100%;"
            >
              <el-option
                v-for="item in pathOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleNodeSave" v-preventReClick
            >确 定</el-button
          >
          <el-button @click="nodeDialogVisible = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import gojsConfig from "./index";
import searchForm from "@/components/SearchForm/index.vue";
import {
  getConfiguration,
  getConfigurationContent,
  delConfiguration,
} from "@/api/configuration";
import store from "@/store/index";
// import { getHeatSourcePermisstion } from "@/api/heatSource";
import { getHeatStation } from "@/api/heatStation";
import { getSystemList } from "@/api/system";
import { getRealDataAll } from "@/api/realDataManage";
import addOrEditDialog from "./component/addOrEditDialog.vue";
import {
  predefineColors,
  fontSizeOptions,
  fontFamilyOptions,
  gdggOptions,
} from "./modelJson";
import timer from "@/utils/setTime";
export default {
  name: "configuration",
  components: { searchForm, addOrEditDialog },
  data() {
    return {
      formInline: {
        heatSourceId: "",
        heatStationId: "",
        heatSystemId: "",
        chartId: "",
        backgroundColor: null,
        alarmColor: "#FF0000",
        alarmDataColor: "#FF0000",
        onlineDataColor: "#666",
        normalDataColor: "#333",
      },
      searchData: [
        {
          type: "Select",
          prop: "heatSourceId",
          options: [],
          placeholder: "选择热源",
          width: 150,
          change: (row) => {
            this.handleHeatSourceChange(row, 1);
          },
        },
        {
          type: "Select",
          prop: "heatStationId",
          options: [],
          width: 150,
          placeholder: "选择换热站",
          change: () => {
            this.handleHeatStationChange(1);
          },
        },
        {
          type: "Select",
          prop: "heatSystemId",
          options: [],
          width: 150,
          placeholder: "选择系统",
          change: () => {
            this.getConfigurationList(1);
          },
        },
        {
          type: "Select",
          prop: "chartId",
          options: [],
          width: 150,
          placeholder: "选择组态",
          change: (id) => {
            if (id == "" || id == undefined) {
              gojsConfig.GOSJLoad({}, false);
              return;
            }
            this.getConfigurationChart(id);
          },
        },
      ],
      searchHandle: [
        {
          icon: "el-icon-plus",
          type: "success",
          label: "添加",
          handle: () => {
            this.handleAdd("add");
          },
        },
        {
          icon: "el-icon-edit",
          type: "primary",
          label: "编辑",
          handle: () => {
            this.handleAdd("edit");
          },
        },
        {
          icon: "el-icon-delete",
          type: "danger",
          label: "删除",
          handle: () => {
            this.handleAdd("del");
          },
        },
      ],
      dialogObj: {
        show: false,
        type: "add",
        row: {},
      },
      nodeDialogVisible: false,
      category: "pic", //类型
      form: {
        name: "",
        zh_value: "", //字号
        zt_value: "", //字体
        bjcolor_value: "",
        fontcolor_value: "",
        gdgg_value: "",
        gdcolor_value: "",
        sjd_value: "", //数据点id
        heatSourceId: "",
        heatStationId: "",
        heatSystemId: "",
        pathId: "",
      },
      predefineColors: predefineColors,
      options3: fontSizeOptions,
      options4: fontFamilyOptions,
      options5: gdggOptions,
      heatOptions: [], //节点热源列表
      pathOptions: [],
      stationOptions: [],
      systemOptions: [],
      loading: false,
      sjdOptions: [], //数据点
    };
  },
  mounted() {
    this.getHeatSourceList();
    gojsConfig.setVm(this);
    gojsConfig.GOJSInit("myDiagramDiv");
    gojsConfig.GOJSTypeInIt("myPaletteDiv"); // 左侧
  },
  beforeUnmount() {
    timer.ctbi("reData");
    // timer.ctbi('gojs.loopLink')
    // timer.ctbi('gojs.loopNode')
  },
  methods: {
    getHeatSourceList() {
      const { sourceData } = store.getters;
      this.searchData[0].options = sourceData;
      this.heatOptions = sourceData;
    },
    /**
     * 根据热源查询换热站和系统
     * num为1表示页面热源2为节点弹框热源列表
     */
    handleHeatSourceChange(val, num) {
      if (num === 1) {
        this.formInline.heatStationId = "";
        this.formInline.heatSystemId = "";
        this.searchData[1].options = [];
        this.searchData[2].options = [];
      } else {
        this.form.heatStationId = "";
        this.stationOptions = [];
      }
      this.getHeatStationList(val, num);
      this.getSystemData(num);
      this.getConfigurationList(num);
    },
    /**
     * 根据换热站查询系统
     */
    handleHeatStationChange(type) {
      this.getSystemData(type);
      this.getConfigurationList(type);
    },
    /**
     * 获取组态列表
     */
    getConfigurationList(type) {
      let param = {};
      if (type === 1) {
        this.formInline.chartId = "";
        this.searchData[3].options = [];
        const { heatSourceId, heatStationId, heatSystemId } = this.formInline;
        param = { heatSourceId, heatStationId, heatSystemId };
        if (heatSourceId == "") {
          this.formInline.chartId = "";
          this.searchData[3].options = [];
          return;
        }
      } else {
        this.form.pathId = "";
        this.pathOptions = [];
        const { heatSourceId, heatStationId, heatSystemId } = this.form;
        param = { heatSourceId, heatStationId, heatSystemId };
        if (heatSourceId == "") {
          this.form.pathId = "";
          this.pathOptions = [];
          return;
        }
      }

      getConfiguration(param).then((res) => {
        if (res.data.success) {
          let { data } = res.data;
          if (type === 1) {
            const result = data.map((item) => {
              return { label: item.name, value: item.id, ...item };
            });
            this.searchData[3].options = result;
          } else {
            this.pathOptions = data;
          }
        }
      });
    },
    /**
     * 获取换热站列表
     */
    async getHeatStationList(id, type) {
      if (type == 1 && id == "") {
        this.formInline.heatStationId = "";
        this.searchData[1].options = [];
        return;
      }
      if (type == 2 && id == "") {
        this.form.heatStationId = "";
        this.stationOptions = [];
        return;
      }
      const { data: resp } = await getHeatStation({ heatSourceId: id });
      if (resp.success) {
        const list = resp.data;
        if (type == 1) {
          const listResult = resp.data.map((item) => {
            return { label: item.name, value: item.id };
          });
          this.searchData[1].options = listResult;
        } else {
          this.stationOptions = list;
        }
      }
    },
    /**
     * 获取系统列表
     */
    getSystemData(type) {
      var params = {};
      if (type === 1) {
        this.formInline.heatSystemId = "";
        this.searchData[2].options = [];
        const { heatStationId, heatSourceId } = this.formInline;
        params = { heatSourceId, heatStationId };
      } else {
        this.form.heatSystemId = "";
        this.systemOptions = [];
        const { heatStationId, heatSourceId } = this.form;
        params = { heatSourceId, heatStationId };
      }

      getSystemList(params).then((res) => {
        if (res.data.success) {
          const { data } = res.data;
          if (type === 1) {
            const list =
              data &&
              data.map((item) => {
                return { label: item.name, value: item.id };
              });
            this.searchData[2].options = list;
          } else {
            this.systemOptions = data ? data : [];
          }
        }
      });
    },
    changeBgFn(color) {
      this.$refs["container-Bg"].style.backgroundColor = color;
    },
    /**
     * 加载组态图
     */
    getConfigurationChart(chartId) {
      getConfigurationContent({ id: chartId }).then((res) => {
        if (res.data.success) {
          const {
            content,
            alarmColor,
            alarmDataColor,
            normalDataColor,
            onlineDataColor,
            backgroundColor,
          } = res.data.data[0];
          gojsConfig.GOSJLoad(content, false);
          this.formInline.backgroundColor = backgroundColor;
          this.formInline.alarmColor = alarmColor;
          this.formInline.alarmDataColor = alarmDataColor;
          this.formInline.normalDataColor = normalDataColor;
          this.formInline.onlineDataColor = onlineDataColor;
        }
      });
    },
    /**添加组态 */
    handleAdd(type) {
      if (this.formInline.heatSourceId == "") {
        return this.$message.error("请选择热源");
      }

      if (type == "add") {
        this.dialogObj.show = true;
        this.dialogObj.type = type;
      } else if (type == "edit") {
        if (this.formInline.chartId == "") {
          return this.$message("请选择需要修改的组态图！");
        }

        const itemObj = this.searchData[3].options.find((item) => {
          return item.value === this.formInline.chartId;
        });
        this.dialogObj.show = true;
        this.dialogObj.type = type;
        this.dialogObj.row = itemObj || {};
      } else {
        this.handleDelete();
      }
    },
    /**
     * 删除
     */
    handleDelete() {
      if (this.formInline.chartId == "") {
        return this.$message("请选择要删除的组态图！");
      }
      this.$confirm("此操作将永久删除该组态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delConfiguration({ id: this.formInline.chartId }).then((res) => {
            if (res.data.success) {
              this.$message.success("删除成功");
              gojsConfig.GOSJLoad({}, false);
              this.formInline.chartId = "";
              this.getConfigurationList(1);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**查询数据点 */
    remoteMethod(query) {
      this.loading = true;
      if (query !== "") {
        const { heatSourceId, heatStationId, heatSystemId } = this.form;
        getRealDataAll({
          heatSourceId,
          heatStationId,
          heatSystemId,
          dataName: query,
        }).then((res) => {
          if (res.data.success) {
            this.sjdOptions = res.data.data;
            this.loading = false;
          }
        });
      } else {
        this.sjdOptions = [];
        this.loading = false;
      }
    },
    /**数据点发生改变 */
    dataPointChange(val) {
      this.form.name = this.sjdOptions.filter(
        (item) => item.id === val
      )[0].dataName;
    },
    /**
     * 节点保存
     */
    handleNodeSave() {
      gojsConfig.GOJSSaveNode();
      this.$message.success("设置成功");
      this.nodeDialogVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.configuration {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;

  .left {
    width: 200px;
    height: 100%;
    border: 1px solid #ccc;
  }
  .right {
    flex: 1;
    height: 100%;
    margin-left: 8px;

    border: 1px solid #ccc;
    #myDiagramDiv {
      height: calc(100% - 58px);
      // background: blue;
    }
  }
}
</style>
<style>
.configuration .el-color-picker--small {
  vertical-align: middle;
  margin-right: 5px;
}
</style>
